<template>
  <div class="c-circle" ref="circle-container">
    <data-v-chart style="height: 100%" @set-opt="onSet"></data-v-chart>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */
import echarts from "echarts";
import zrender from "zrender";
import "./echarts-liquidfill.min";
export default {
  name: "data-v-droplet",
  props: {},
  computed: {},
  created() {},
  data() {
    return {};
  },
  watch: {},
  mounted() {},
  methods: {
    onSet(chart) {
      this.chart = chart;
      let zr = chart.getZr();
      let size = this.getSizeInfo(chart);

      let opt1 = {
        shape: this.getShape(chart, 0.7),
        style: {
          stroke: "#023344",
          fillOpacity: 0,
          lineWidth: 10,
          lineDash: [80, 3]
        }
      };

      let opt2 = {
        shape: this.getShape(chart, 0.6),
        style: {
          stroke: "#155f8a",
          fillOpacity: 0,
          lineWidth: 3,
          lineDash: [4]
        }
      };

      let bezierOpt = {
        shape: {
          x1: 0,
          y1: 0,
          x2: size.cx,
          y2: size.cy,
          cpx1: size.cx / 2,
          cpy1: 0,
          cpx2: size.cx / 2,
          cpy2: size.cy
        },
        style: {
          stroke: "155f8a",
          // fill: "#155f8a",
          // fillOpacity: 0,
          lineWidth: 1
        }
      };

      let LineOpt = {
        shape: {
          x1: size.cx,
          y1: size.h,
          x2: size.cx,
          y2: size.cy
        },
        style: {
          stroke: "#00fcff"
        }
      };

      // 内圆渐变
      let gradient = new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
        { offset: 0, color: "rgba(0, 124, 157, 0)" },
        { offset: 1, color: "rgba(0, 124, 157, 0.8)" }
      ]);

      // let linearGradient = new echarts.graphic.LinearGradient(0.5, 0.5, 1, 1, [
      //   { offset: 0, color: "rgba(0, 124, 157, 0)" },
      //   { offset: 1, color: "rgba(0, 124, 157, 0.8)" }
      // ]);

      let opt3 = {
        shape: this.getShape(chart, 0.55),
        style: {
          stroke: "#00fcff",
          lineWidth: 3,
          lineDash: [3,  65]
        }
      };
      let opt4 = {
        shape: this.getShape(chart, 0.5),
        style: {
          fill: gradient,
          fillOpacity: 1
        }
      };

      let c1 = new echarts.graphic.Circle(opt1);
      let c2 = new echarts.graphic.Circle(opt2);
      let c3 = new echarts.graphic.Circle(opt3);
      let c4 = new echarts.graphic.Circle(opt4);
      let bezier = new echarts.graphic.BezierCurve(bezierOpt);
      let line = new echarts.graphic.Line(LineOpt);

      let mergePath = zrender.path.mergePath([bezier, line], {
        style: {
          stroke: "#00fcff",
          fill: "#155f8a"
        }
      });

      zr.add(c1);
      zr.add(c2);
      zr.add(c3);
      zr.add(c4);
      // zr.add(bezier);
      // zr.add(mergePath);

      window.addEventListener("resize", () => {
        c1.attr({
          shape: this.getShape(chart, 0.7)
        });
        c2.attr({
          shape: this.getShape(chart, 0.6)
        });
        c3.attr({
          shape: this.getShape(chart, 0.55)
        });
        c4.attr({
          shape: this.getShape(chart, 0.5)
        });
      });

      chart.setOption({
        series: [
          {
            type: "liquidFill",
            radius: "50%",
            center: ["50%", "50%"],
            data: [0.5, 0.5], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              // color: 'rgb(255,0,255,0.1)'
              color: "transparent"
            },
            color: [gradient, gradient],
            label: {
              show: false
            },
            outline: {
              show: false
            }
          }
        ]
      });
    },
    getSizeInfo(chart) {
      this.chart = chart;
      let zr = chart.getZr();
      let w = chart.getWidth();
      let h = chart.getHeight();
      let cx = w * 0.5;
      let cy = h * 0.5;
      let len = w < h ? w : h;
      return { w, h, cx, cy, len };
    },

    // shape对象
    getShape(chart, percent) {
      let size = this.getSizeInfo(chart);
      return {
        cx: size.cx,
        cy: size.cy,
        r: size.len * percent * 0.5
      };
    },

    getDropletShape(chart, percent) {
      let size = this.getSizeInfo(chart);
      return {
        cx: size.cx,
        cy: size.cy,
        width: size.w * percent,
        height: size.h * percent
      };
    }
  }
};
</script>

<style lang="less">
.c-circle {
  position: relative;
  height: 100%;
}
</style>
